<template>
    <a-drawer :title="title" :width="480" @close="handleCancel(false)" :visible="visible" :maskClosable="false"
              :bodyStyle="{ paddingBottom: '60px' }">

        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <!-- 登录账号 -->
            <a-form-model-item label="时段名称" prop="name" ref="name">
                <a-input placeholder="请设置时段名称 例如:白天"
                         :maxLength="20"
                         v-model="form.name"/>
            </a-form-model-item>

            <a-form-model-item label="时间范围">

                <a-time-picker placeholder="开始时间" :default-value="fmtStartTime()" format="HH:mm"
                               @change="onChangeStartTime"/>
                ~
                <a-time-picker placeholder="截止时间" :default-value="fmtEndTime()" format="HH:mm"
                               @change="onChangeEndTime"/>

            </a-form-model-item>

            <a-divider orientation="left">免费规则</a-divider>

            <a-form-model-item label="免费时长">
                <a-switch checked-children="启用免费时长"
                          un-checked-children="不启用免费时长"
                          :checked="freeMinutesStatus" @change="onChangeSwitch"/>
            </a-form-model-item>

            <a-form-model-item v-if="freeMinutesStatus" label="免费时长" prop="freeMinutes" ref="freeMinutes">
                <TimeUtil :minutes="form.freeMinutes" @callBack="e=>form.freeMinutes=e "/>
            </a-form-model-item>


            <a-divider orientation="left">起价规则</a-divider>

            <a-form-model-item label="起价金额" prop="firstFee" ref="firstFee">

                <a-input-number style="width: 50%"
                                v-model="showFirstFee"

                                placeholder="请设置时段内的起价金额"
                                :min="0"
                                :step="0.01"
                                @change="fmtFirstFee"
                />
                <span class="text-aux padded10"> 单位:元</span>

            </a-form-model-item>


            <a-form-model-item label="停放时长" prop="firstMinutes" ref="firstMinutes">

                <TimeUtil :minutes="form.firstMinutes" @callBack="e=>form.firstMinutes=e "/>

            </a-form-model-item>


            <a-divider orientation="left">续费规则</a-divider>

            <a-form-model-item label="续费金额" prop="renewalFee" ref="renewalFee">
                <a-input-number placeholder="请设置每次续费的金额" style="width: 50%"
                                :min="0"
                                :step="0.01"
                                v-model="showRenewalFee"
                                @change="fmtRenewalFee"
                />
                <span class="text-aux padded10"> 单位:元</span>
            </a-form-model-item>


            <a-form-model-item label="停放时长" prop="renewalMinutes" ref="renewalMinutes">

                <TimeUtil :minutes="form.renewalMinutes" @callBack="e=>form.renewalMinutes=e "/>
            </a-form-model-item>
        </a-form-model>


        <!-- Modal 页脚 -->
        <footer class="drawer-footer">
            <a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
        </footer>
    </a-drawer>
</template>
<script>
    import moment from 'moment';
    import {TimePeriodAdd, TimePeriodUpdate} from '../../public/http.js';


    export default {
        props: ['editRecord'],
        components: {
            TimeUtil: () => import('./TimeUtil')
        },


        data() {
            return {
                isUpdate: false, //是否是更新模式
                loading: false, //按钮Loading
                title: '添加时段规则',
                visible: true, //modal 显示状态
                labelCol: {
                    xs: {
                        span: 24
                    },
                    sm: {
                        span: 5
                    }
                },
                wrapperCol: {
                    xs: {
                        span: 24
                    },
                    sm: {
                        span: 16
                    }
                },
                freeMinutesStatus: false,
                form: {
                    ruleCode: null,
                    name: null,
                    startTime: undefined,
                    endTime: undefined,
                    freeMinutes: 0,
                    firstMinutes: null,
                    firstFee: null,
                    renewalMinutes: null,
                    renewalFee: null

                },
                showRenewalFee: null,
                showFirstFee: null,

                rules: {

                    name: [
                        {
                            required: true,
                            message: '请设置时段名称',
                            trigger: 'blur'
                        },
                        {
                            max: 10,
                            message: '时段名称请设置在10个字符以内',
                            trigger: 'blur'
                        }
                    ],


                    freeMinutes: {
                        required: true,
                        message: '请设置免费时长分钟数',
                        trigger: 'blur'
                    },

                    firstFee: {
                        required: true,
                        message: '请设置起价停放金额',
                        trigger: 'blur'
                    },
                    firstMinutes: [
                        {
                            required: true,
                            message: '请设置起价停放分钟数',
                            trigger: 'blur'
                        },
                    ],
                    renewalFee: {
                        required: true,
                        message: '请设置单位续费计金额',
                        trigger: 'blur'
                    },

                    renewalMinutes: [{
                        required: true,
                        message: '请设置单位续费时长',
                        trigger: 'change'
                    },

                    ]


                },

            };
        },
        methods: {
            //格式化入场金额
            fmtFirstFee(e) {
                if (e && e > 0) {
                    this.form.firstFee = e * 100;
                } else {
                    this.form.firstFee = null;
                }

            },

            //格式化续费金额
            fmtRenewalFee(e) {
                if (e && e > 0) {
                    this.form.renewalFee = e * 100;
                } else {
                    this.form.renewalFee = null;
                }
            },

            fmtStartTime() {
                if (this.form.startTime) {
                    return moment(this.form.startTime, 'HH:mm');
                } else {
                    return undefined;
                }

            },

            onChangeStartTime(time, timeString) {
                this.form.startTime = timeString;

            },


            fmtEndTime() {
                if (this.form.endTime) {
                    return moment(this.form.endTime, 'HH:mm');
                } else {
                    return undefined;
                }

            },

            onChangeEndTime(time, timeString) {
                this.form.endTime = timeString;

            },

            onChangeSwitch(e) {
                this.freeMinutesStatus = e;
                this.form.freeMinutes = e ? null : 0;

            },

            //表单提交事件
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    //验证成功后进行数据提交
                    if (valid) {
                        this.loading = true;
                        if (this.isUpdate) {

                            TimePeriodUpdate(this.form.id, this.form).then(res => {
                                this.$exMod.ajaxMessage(res);
                                if (res.code === 0) {
                                    this.handleCancel(true);
                                }
                            });


                        } else {
                            TimePeriodAdd(this.form).then(res => {
                                this.$exMod.ajaxMessage(res);
                                if (res.code === 0) {
                                    this.handleCancel(true);
                                }
                            });
                        }
                        this.loading = false;
                    }
                });
            },
            //关闭弹窗
            handleCancel(render = false) {
                this.visible = false;
                this.$emit('closeFun', {render: render});
            },
            //表单初始化
            fromVal() {
                let obj = {...this.editRecord};
                if (obj.id) {
                    this.form = obj;
                    this.isUpdate = true;
                    this.title = '编辑车辆分类';

                    this.freeMinutesStatus = obj.freeMinutes > 0;
                    this.showRenewalFee = obj.renewalFee / 100;
                    this.showFirstFee = obj.firstFee / 100;


                } else {
                    this.form.ruleCode = obj.ruleCode;
                }


            },
            //数据初始化
            async init() {

                this.fromVal();
            }
        },

        created() {

            this.init();
        }
    };
</script>
